<template>
  <ex-dialog width="1200px" class="ex-diolog" :title="title" :visible="visible" :close-on-click-modal="false"
    @closeDialog="handleClose" append-to-body>
    <div class="main" v-loading="loading">
      <template>
        <el-form :model="queryParams" ref="queryForm" :inline="true">
          <el-form-item label="" prop="keywords">
            <el-input v-model="queryParams.keywords" placeholder="请输入商家信息/林客ID/直播ID" clearable style="width: 260px;" />
          </el-form-item>
          <el-form-item label="直播日期：">
            <el-date-picker clearable v-model="date" type="daterange" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
              range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="changeTime"
              placeholder="请选择">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">查询</el-button>
            <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" ref="multipleTable" :data="tabList" stripe border tooltip-effect="dark"
          style="width: 100%" >

          <el-table-column label="序号" align="center" type="index" width="64px" />
          <el-table-column label="直播ID" align="center" prop="liveId"></el-table-column>
          <el-table-column label="直播名称" align="center" prop="liveName"  width="210px"></el-table-column>
          <el-table-column label="直播开始时间" align="center" prop="beginTime" width="160px"></el-table-column>
          <el-table-column label="直播结束时间" align="center" prop="endTime" width="160px"></el-table-column>
          <el-table-column label="抖音号" align="center" prop="dyName"></el-table-column>
          <el-table-column label="作者名称" align="center" prop="author"></el-table-column>
          <el-table-column label="直播类型" align="center" prop="liveType"></el-table-column>
          <el-table-column label="带货力等级" align="center" prop="carryingLevel" width="100px"></el-table-column>
          <el-table-column label="内容力等级" align="center" prop="contentLevel" width="100px"></el-table-column>
          <el-table-column label="商家信息" align="center" prop="merchantInfo"></el-table-column>
          <el-table-column label="林客ID" align="center" prop="linkId" width="90px"></el-table-column>
          <el-table-column label="支付GMV" align="center" prop="payGmv" width="90px"></el-table-column>
          <el-table-column label="核销GMV" align="center" prop="writeOffGmv" width="90px"></el-table-column>
          <el-table-column label="退款GMV" align="center" prop="refundGmv" width="90px"></el-table-column>
          <el-table-column label="支付券数" align="center" prop="payOfCoupons"></el-table-column>         
          <el-table-column label="核销券数" align="center" prop="writeOffOfCoupons"></el-table-column>   
          <el-table-column label="退款券数" align="center" prop="refundOfCoupons"></el-table-column>   
          <el-table-column label="服务商预估佣金" align="center" prop="serviceCommission" width="120px"></el-table-column>
         
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" :page-sizes="[10, 100, 300, 500, 1000]"></pagination>
      </template>
    </div>
  </ex-dialog>
</template>
<script>
import { getToken } from '@/utils/auth'
import Loading from "@/components/Loading/index";
// api
import {
  dataImportList,
} from "@/api/customer/serviceData";
export default {
  components: {
    Loading,
  },
  props: {
    visible: Boolean,
    id: String,
  },
  data() {
    return {
      labelWidth: "140px",
      inputWidth: "430px",
      title: "导入直播数据",
      loading: false,
      disabled: false,
      AgreeLoading: false,
      dialogVisible: false, //导入失败弹窗
      total: 0,
      //表格数据
      tabList: [],
      date:[],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        beginTime: '',
        endTime: '',
        keywords: '',
      },
    };
  },
  computed: {},
  created() {
    this.getList()
  },
  mounted() {

  },
  computed: {},
  methods: {
    //取消
    handleClose(formName) {
      this.$emit("update:visible", false);
    },
     //时间
     changeTime(e) {
      this.queryParams.beginTime = e[0]
      this.queryParams.endTime = e[1]
    },
    /** 查询列表 */
    getList() {
      this.loading = true;
      dataImportList(this.queryParams).then(response => {        
        this.tabList = response.result.records;
        this.total = response.result.total;
        this.loading = false;

      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;     
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm("queryForm");
      this.date = []
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        beginTime: '',
        endTime: '',
        keywords: '',
      };
      this.resetForm("queryParams");
      this.handleQuery()
    },
  }
};
</script>
<style lang="scss" scoped>
.ex-diolog {
  ::v-deep .ex--dialog--footer {
    border: none !important;
    padding: 0 !important;
  }

  ::v-deep .ex--dialog--main {
    padding: 10px 20px !important;
  }
}

.el-select,
.el-input,
.el-cascader {
  width: 400px;
}

.main {
  padding: 20px 20px;
}

.button_box {
  display: flex;
  justify-content: center;
}

.el-radio-group {
  display: flex;
  flex-direction: column;

  .el-radio {
    margin-bottom: 14px;
  }
}

.form_item {
  display: flex;
}

.form_item_label {
  margin-left: 18px;
  color: #606266;
  font-size: 14px;
  font-weight: bold;
}

.form_item_detail {
  margin-left: 10px;
}
</style>